<%--
  Created by IntelliJ IDEA.
  User: 26423
  Date: 2021/6/18
  Time: 16:01
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>畅销书</title>
    <%@include file="webdaohanglan.jsp" %>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/zturn.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style type="text/css">
        #footer {
            clear: both;
            height: 40px;
            background-color: #ccc;

        }

        #footer p {
            font-weight: bold;
            font-size: 12px;
            color: black;

            line-height: 40px;
            text-align: center;
        }

        #fanhui_2 {
            float: right;
            margin: -200px 900px;

        }

        #fanhui_3 {
            float: left;
            margin: -200px 900px;

        }

        .price {
            color: red;
        }

    </style>
</head>

<body>

<!--轮播-->

<!--轮播-->
<!--轮播-->
<div class="lb_gl">
    <div class="container">

        <h1 class="turn_3d">科技类畅销书</h1>
        <div class="pictureSlider poster-main">
            <div class="poster-btn poster-prev-btn"></div>
            <ul id="zturn2" class="poster-list">

                <c:forEach var="book" items="${bookTypeList}">
                    <li class="poster-item  zturn-item">

                        <div class="for_btn">
                            <a href=""><img src="${book.bookFengMian}" width="100%"></a>
                            <!-- <a href="#" class="in_page"><img src="images/iconin.png" /></a> -->
                        </div>

                        <div class="students_star">
                            <p class="cell_list"><span class="lf">书名：<span
                                    class="darks">《${book.bookName}》</span></span>
                            </p>
                            <p class="cell_list"><span>作者：<span class="darks">${book.bookAuthor}</span></span>
                            </p>
                            <p class="cell_list"><span>价格：<span class="price"> ${book.bookPrice}￥</span></span>
                            <div class="zwjs">
                                内容简介：${book.bookAbstract}······
                                <br>
                                <c:if test="${userInfo.username != null}">
                                    <button height="50px" width="50px"
                                            onclick="addShop(${book.id},`${book.bookName}`,1,${book.bookPrice})">购买
                                    </button>
                                    <button height="50px" width="50px"
                                            onclick="borrowBook(${book.id},`${book.bookName}`)">借书
                                    </button>
                                    <script>
                                        function addShop(id, bookName, number, bookPrice) {
                                            let money = number * bookPrice;
                                            $.post("/order?type=addShopCar", {
                                                username: `${userInfo.username}`,
                                                id: id,
                                                bookName: bookName,
                                                number: number,
                                                bookPrice: bookPrice,
                                                money: money,
                                            }, function (data, status) {
                                                alert(data)
                                                // alert("Data: " + data + "nStatus: " + status);
                                            });
                                        }


                                        function borrowBook(id, bookName) {
                                            $.post("/borrow?type=borrowBook", {
                                                username: `${userInfo.username}`,
                                                bookId: id,
                                                bookName: bookName
                                            }, function (data, status) {
                                                alert(data)
                                                // alert("Data: " + data + "nStatus: " + status);
                                            });
                                        }
                                    </script>

                                </c:if>

                            </div>
                        </div>
                    </li>
                </c:forEach>


            </ul>
        </div>
    </div>

</div>
<div id="fanhui_2">
    <a href="webshoppingcar.jsp"><img src="imag/car1.jpg" height="100px" width="300px">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp购物车</a>
</div>
<div id="fanhui_3">
    <a href="/borrow?type=userBorrowList&username=${userInfo.username}"><img src="imag/car2.jpg" height="100px"
                                                                             width="300px">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp借还书记录</a>
</div>
-->
</body>


<script type="text/javascript">
    var aa = new zturn({
        id: "zturn",
        opacity: 0.9,
        width: 382,
        Awidth: 1024,
        scale: 0.9,
        auto: true,//是否轮播 默认5000
        turning: 1000//轮播时长
    })
    var ab = new zturn({
        id: "zturn2",
        opacity: 0.8,
        width: 382,
        Awidth: 1024,
        scale: 0.6,
        auto: true
    })
</script>
</html>
